<template>
    <div class="mainContent">
        <div class="scorll">
            <div class="content">
                <div class="box">
                    <div class="search">
                        <div class="left">
                            <span style="color:var(--themeColor);margin-right:15px;">选择日期</span>
                            <RadioGroup v-model="dateRadio" @on-change='dateRadioFn'>
                                <Radio v-for="(val,index) in radiolist" :key="index" :label="val.id" style="margin-right:15px;">
                                    <span style="color:var(--themeColor);">{{val.name}}</span>
                                </Radio>
                            </RadioGroup>
                            <div class="right_box">
                                <div class="arrow_left" @click="prevFn"><Icon type="md-arrow-dropleft"/></div>
                                <DatePicker type="date" :options="options" :editable='false' :clearable='false' v-if=" dateRadio == 2 " placeholder="请选择开始日期" style="width: 2rem;margin-right:10px;" format="yyyy-MM-dd" v-model="enterTime" @on-change="getStartTimeFn"></DatePicker>
                                <DatePicker :type="dateRadio==1?'month':'date'" :editable='false' :clearable='false' :options="options" placeholder="请选择结束日期" style="width: 2rem" :format="dateRadio==1?'yyyy-MM':'yyyy-MM-dd'" v-model="day" @on-change="getTimeFn"></DatePicker>
                                <div class="arrow_right" v-show="!timeFlag" @click="nextFn"><Icon type="md-arrow-dropright" /></div>
                                <div class="arrow_right" v-show="timeFlag"><Icon type="md-arrow-dropright" style="color:#eee;cursor:not-allowed"/></div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="btnList">
                                <el-button  v-if="auth.isExport" @click="getInoutRecordExportFn"  plain size="small" type="primary">导出</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="canvas">
                        <div class="left">
                            <div id="dataPie" :style="{ height: '2.2rem',width:'2.8rem'}"></div>
                            <vue-seamless-scroll class="right_r"  :style="[{'height':licensePlateList.length > 4 ? '2rem' :'1.3rem'},{'overflow': 'hidden'},{'position': 'relative'}]" :data="licensePlateList" :class-option="classOption">
                                <ul class="list">
                                    <li v-for="(item,index) in licensePlateList" :key="index">
                                        <div class="radius" :style="{'background':colors[index]}"></div>
                                        <div class="name">
                                            <Tooltip  transfer :content="item.name" placement="top-start"  max-width='200'>
                                                <div class="p" style="width:0.7rem;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer;">
                                                    {{item.name}}
                                                </div>
                                            </Tooltip>
                                        </div>
                                        <div class="sub" v-if="licensePlateCount>0">{{item.value+'次'}}</div>
                                        <div class="sub" v-if="licensePlateCount>0">{{((item.value/licensePlateCount)*100).toFixed(2) + '%'}}</div>
                                    </li>
                                    <template v-if="licensePlateList.length>4">
                                        <li v-for="(item,index) in licensePlateList" :key="index+licensePlateList.length" >
                                            <div class="radius" :style="{'background':colors[index]}"></div>
                                            <div class="name">
                                                <Tooltip  transfer :content="item.name" placement="top-start"  max-width='200'>
                                                    <div class="p" style="width:0.7rem;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer;">
                                                        {{item.name}}
                                                    </div>
                                                </Tooltip>
                                            </div>
                                            <div class="sub" v-if="licensePlateCount>0">{{item.value+'次'}}</div>
                                            <div class="sub" v-if="licensePlateCount>0">{{((item.value/licensePlateCount)*100).toFixed(2) + '%'}}</div>
                                        </li>
                                    </template>
                                </ul>
                            </vue-seamless-scroll>
                        </div>
                        <div class="right">
                            <div class="canvas_none" v-if="flag"><img src="../../assets/images/common/canvas_none1.png" /></div>
                            <div id="dataLine" :style="{ height: '2.2rem',width:'100%'}"></div>
                        </div>
                    </div>
                    <div class="tableBox">
                        <div class="tableList">
                            <el-table :data="list" :stripe="true">
                                <el-table-column fixed prop="name" label="车主姓名"></el-table-column>
                                <el-table-column fixed prop="licensePlate" label="车牌号码"></el-table-column>
                                <el-table-column fixed prop="deviceName" label="设备名称"></el-table-column>
                                <el-table-column fixed prop="direction" label="方向">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.direction == 0">出</span>
                                        <span v-if="scope.row.direction == 1">进</span>
                                    </template>
                                </el-table-column>
                                <el-table-column fixed prop="imgUrl" label="识别照片">
                                    <template slot-scope="scope">
                                        <el-image style="display:block;width:1.15rem;height:0.4rem;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]" ></el-image>
                                    </template>
                                </el-table-column>
                                <el-table-column fixed prop="time" label="识别时间"></el-table-column>
                            </el-table>
                        </div>
                        <div class="clearfix" v-show="list.length>0">
                            <div class="float-right">
                                <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { format ,initMD,initYMD,initYMDHM,getPreMonth,getNextMonth} from "@/sever/utils.js";
import { getCarInoutRecordList,getCarInoutRecordStatistical,getInoutRecordExport } from "@/api/car.js";
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
    components: {vueSeamlessScroll},
    data() {
        return {
            classOption:{
                step: 0.5,
            },
            options: {
                disabledDate(date) {
                    return date > Date.now();
                },
            },
            colors: [
                "#FCC23B ",
                "#28D79C ",
                "#A9B0BB ",
                "#8BB5FE ",
                "#FFBFB5 ",
                "#FF4848 ",
                "#8bc34a",
                "#b3e5fc",
                "#ef5350",
                "#4dd0e1",
                "#304ffe",
                "#ff4081",
                "#82b1ff",
                "#6a1b9a",
                "#f57f17",
                "#b71c1c",
                "#a5d6a7",
                "#ffab91",
                "#880e4f",
                "#f8bbd0"
            ],
            list: [],
            pageSize: 7,
            pageNum: 1,
            current: 1,
            totalCount: 0,
            deptId: "",
            radiolist: [
                {
                    id: 0,
                    name: "按日"
                },
                {
                    id: 1,
                    name: "按月"
                },
                {
                    id: 2,
                    name: "自定义"
                }
            ],
            dateRadio:0,
            licensePlateCount:0,
            day:new Date(),
            enterTime:new Date(),
            dataLineArr:[],
            licensePlateList:[],
            timeFlag:true,
            flag:false,
            auth:{
                isExport: false,
            }, 
            btnList:[] //权限列表
        };
    },
    methods: {
        initAuth(){
            this.auth.isExport = this.btnList.includes('car/gate/export')
        },
        getInoutRecordExportFn(){
            let params ;
            if(this.dateRadio === 0){
                params = {
                    deptId: this.deptId,
                    time: initYMD(this.day),
                };
            }else if(this.dateRadio === 1){
                params = {
                    deptId: this.deptId,
                    date: (initYMD(this.enterTime)).substring(0, 7),
                };
            }else if(this.dateRadio === 2){
                params = {
                    deptId: this.deptId,
                    startTime: initYMD(this.enterTime)+' 00:00:00',
                    endTime: initYMD(this.day)+' 23:59:59',
                };
            }
            getInoutRecordExport(params).then(res=>{
                if(res.code == 200) {
                    this.$Message.success("导出成功");
                    window.open(res.data.path)
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        getStatisticalFn() {
            let params ;
            if(this.dateRadio === 0){
                params = {
                    deptId: this.deptId,
                    time: initYMD(this.day),
                };
            }else if(this.dateRadio === 1){
                params = {
                    deptId: this.deptId,
                    date: (initYMD(this.enterTime)).substring(0, 7),
                };
            }else if(this.dateRadio === 2){
                params = {
                    deptId: this.deptId,
                    startTime: initYMD(this.enterTime)+' 00:00:00',
                    endTime: initYMD(this.day)+' 23:59:59',
                };
            }
            getCarInoutRecordStatistical(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.licensePlateList = [];
                        this.dataLineArr = [];
                        this.licensePlateCount = 0;
                        this.flag = false;
                        for (let i in res.data.licensePlateList) {
                            this.licensePlateCount += Number(res.data.licensePlateList[i].num);
                            let obj = {
                                name: res.data.licensePlateList[i].licensePlate,
                                value: res.data.licensePlateList[i].num,
                                itemStyle: {
                                    normal: {
                                        color: this.colors[i],
                                    },
                                }
                            };
                            this.licensePlateList.push(obj);
                        }
                        if(res.data.licensePlateList.length == 0){
                            let obj = {
                                name: '暂无数据',
                                value: 0,
                                itemStyle: {
                                    normal: {
                                        color: this.colors[0],
                                    },
                                }
                            };
                            this.licensePlateList.push(obj);
                        }
                        this.dataPieFn();
                        let arr = [];
                        for (let i = 0; i < res.data.carList.length; i++) {
                            if(this.dateRadio === 0){
                                if(res.data.carList[i].hour == res.data.timeList[i].hour){
                                    let obj = {
                                        hour: res.data.carList[i].hour,
                                        bar:res.data.timeList[i].num,
                                        line:res.data.carList[i].num,
                                    }
                                    arr.push(obj);
                                }
                            }else{
                                let obj = {
                                    time: res.data.carList[i].time,
                                    bar:res.data.timeList[i].num,
                                    line:res.data.carList[i].num,
                                }
                                arr.push(obj);
                            }
                        }
                        if(arr.length == 0){
                            this.flag = true;
                        }
                        let time = [];
                        let bar = [];
                        let line = [];
                        arr.forEach(v=>{
                            if(this.dateRadio === 0){
                                time.push(v.hour.substring(0, 5));
                            }else{
                                time.push(initYMD(v.time));
                            }
                            line.push(v.line);
                            bar.push(v.bar);
                        })
                        this.dataLineArr = arr;
                        this.dataLineFn(time,bar,line);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getlist() {
            let params ;
            if(this.dateRadio === 0){
                params = {
                    deptId: this.deptId,
                    time: initYMD(this.day),
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                };
            }else if(this.dateRadio === 1){
                params = {
                    deptId: this.deptId,
                    date: (initYMD(this.enterTime)).substring(0, 7),
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                };
            }else if(this.dateRadio === 2){
                params = {
                    deptId: this.deptId,
                    startTime: initYMD(this.enterTime)+' 00:00:00',
                    endTime: initYMD(this.day)+' 23:59:59',
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                };
            }
            getCarInoutRecordList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        pageChange(index) {
            this.pageNum = index;
            this.getlist();
        },
        dateRadioFn(value){
            if(value == 2){
                this.enterTime = initYMD(new Date(new Date(this.day).getTime() - 2592000000));
            }else{
                this.enterTime = initYMD(new Date(this.day))
            }
            this.getStatisticalFn();
            this.getlist();
        },
        getStartTimeFn(index) {
            this.enterTime = index;
            if(this.dateRadio == 2){
                let enterTime = Date.parse(new Date(this.enterTime));
                let day = Date.parse(new Date(this.day));
                let differDay = parseInt((day-enterTime)/ (1000 * 60 * 60 * 24));
                if(differDay>31){
                    this.$Message.warning('时间跨度不能超过30天');
                    this.day = initYMD(new Date(new Date(this.enterTime).getTime() +  2592000000));
                }
                if(enterTime>day){
                    this.day = initYMD(new Date(new Date(this.enterTime).getTime() +  2592000000));
                }
            }
            this.getStatisticalFn();
            this.getlist();
        },
        getTimeFn(index) {
            this.timeFlag = false;
            if(this.dateRadio == 1){
                this.enterTime = initYMD(this.day);
            }else if(this.dateRadio == 2){
                let enterTime = Date.parse(new Date(this.enterTime));
                let day = Date.parse(new Date(this.day));
                let differDay = parseInt((day-enterTime)/ (1000 * 60 * 60 * 24));
                if(differDay>31){
                    this.$Message.warning('时间跨度不能超过30天');
                    this.enterTime = initYMD(new Date(new Date(this.day).getTime() - 2592000000));
                }
                if(enterTime>day){
                    this.enterTime = initYMD(new Date(new Date(this.day).getTime() - 2592000000));
                }
            }
            this.getStatisticalFn();
            this.getlist();
            if(initYMD(this.day) == initYMD(new Date())){
                this.timeFlag = true;
            }
        },
        prevFn() {
            this.timeFlag = false;
            let day = new Date(this.day);
            if(this.dateRadio != 1){
                day.setTime(day.getTime()-24*60*60*1000);
                this.day = initYMD(day);
            }else{
                this.day = initYMD(day);
            }
            if(this.dateRadio == 1){
                this.day = getPreMonth(this.day);
                this.enterTime = this.day;
            }else if(this.dateRadio == 2){
                this.enterTime = initYMD(new Date(new Date(this.day).getTime() - 2592000000));
            }
            this.getStatisticalFn();
            this.getlist();
        },
        nextFn() {
            let day = new Date(this.day);
            if(this.dateRadio != 1){
                day.setTime(day.getTime()+24*60*60*1000);
                this.day = initYMD(day);
            }else{
                this.day = initYMD(day);
            }
            if(this.dateRadio == 1){
                this.day = getNextMonth(initYMD(this.day));
                this.enterTime = this.day;
            }else if(this.dateRadio == 2){
                this.enterTime = initYMD(new Date(new Date(this.day).getTime() - 2592000000));
            }
            this.getStatisticalFn();
            this.getlist();
            if(initYMD(this.day) == initYMD(new Date())){
                this.timeFlag = true;
            }
        },
        dataPieFn() {
            let dataPie = this.$echarts.init(document.getElementById("dataPie"));
            let flag = true;
            this.licensePlateList.forEach(v=>{
                if(v.value === 0 ){
                    flag = false;
                }
            })
            dataPie.setOption({
                tooltip: {
                    formatter: this.dataPieTipFn,
                    backgroundColor:'rgba(255,255,255,0.8)',//通过设置rgba调节背景颜色与透明度
                    color:'black',
                    textStyle:{
                        color:'#303030',
                    },
                    extraCssText:'box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);'
                },
                title: {
                    text:flag ? this.licensePlateList.length : 0,
                    left: "center",
                    top: "55%",
                    textStyle: {
                        color: "#333333",
                        fontSize: 20,
                        align: "center",
                    },
                },
                graphic: {
                    type: "text",
                    left: "center",
                    top: "45%",
                    style: {
                        text: "进场车辆总数(辆)",
                        textAlign: "center",
                        fill: "#A9B0BB",
                        fontSize: 14,
                        fontWeight: 400,
                    },
                },
                series: [
                    {
                        name: "进场车辆",
                        type: "pie",
                        radius: ["58%", "80%"],
                        avoidLabelOverlap: false,
                        labelLine: {
                            show: false
                        },
                        label: {
                            normal: {
                                position: "inner",
                                show: false
                            }
                        },
                        data: this.licensePlateList
                    }
                ]
            });
        },
        dataLineFn(time,bar, line) {
            let max=0
            line.forEach(v=>{
                if(v>max){
                    max=v
                }
            })
            let dataLine = this.$echarts.init(document.getElementById("dataLine"));
            dataLine.setOption({
                tooltip: {
                    formatter: this.dataLineTipFn,
                    //触发类型：坐标轴触发
                    trigger: 'axis',
                    axisPointer: {
                        type: '',
                    },
                    backgroundColor:'rgba(255,255,255,0.8)',//通过设置rgba调节背景颜色与透明度
                    color:'black',
                    textStyle:{
                        color:'#303030',
                    },
                    extraCssText:'box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);'
                },
                grid: {
                    left: '2%',
                    right: '8%',
                    bottom:'2%',
                    containLabel: true
                },
                xAxis: [
                    {
                        name: this.dateRadio === 0 ? "时间" :"日期",
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#BFBFBF",
                                type: 'dashed',
                            }
                        },
                        splitLine: {
                            //去除网格线
                            show: false,
                            lineStyle: {
                                color:'#BFBFBF',
                            }
                        },
                        boundaryGap: true,
                        data: time
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: "#BFBFBF",
                            }
                        },
                        splitLine: {
                            //去除网格线
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color:'#BFBFBF'
                            }
                        },
                    }
                ],
                series: [
                    {
                        name:'车辆总数',
                        type: 'bar',
                        stack:time,
                        data: line,
                        itemStyle: {
                            normal: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                            offset: 0,
                                            color: 'rgba(139, 181, 254, 1)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(222, 233, 255, 0.3700)'
                                        }
                                    ],
                                    globalCoord: false
                                }
                            }
                        }
                    },
                    {
                        name: '',
                        type: 'pictorialBar',
                        symbolSize:['100%',3],
                        symbolPosition: 'end',
                        symbol: 'reat',
                        z:8,
                        color: '#5D90FF',
                        data:line,
                    },
                    {
                        name: "进场次数",
                        smooth: false , //true 为平滑曲线，false为直线
                        type: 'line',
                        data: bar,
                        z:10,
                        // symbol: 'none',
                        itemStyle: {
                            normal: {
                                color: 'rgba(252, 194, 59, 1)',
                                lineStyle: {
                                    // 系列级个性化折线样式
                                    width:2,
                                    type: 'solid',
                                    // 颜色渐变函数 前四个参数分别表示四个位置依次为
                                    // 右下左上
                                    color: 'rgba(252, 194, 59, 1)',
                                }
                            },
                        }, // 线条样式
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        // 折线图颜色渐变
                                        offset: 0,
                                        color: 'rgba(255, 210, 104, 1)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(255, 210, 104, 0)'
                                    }
                                ])
                            }
                        }
                    },
                ]
            });
        },
        dataPieTipFn(date){
            let nameStr = `
                ${date.seriesName}<br />
                ${date.data.name}:&nbsp;${date.data.value + '次'}&nbsp;(${date.data.value > 0 ? ((Number(date.data.value)/Number(this.licensePlateCount))*100).toFixed(2) + '%' :'0%'})`
            return nameStr
        },
        dataLineTipFn(date){
            let  nameStr = '';
            this.dataLineArr.forEach((v,i)=>{
                if(date[0].dataIndex==i){
                    nameStr = `
                    <div class="canvasBox">
                        <div class="item">
                            <span class="name">${this.dateRadio == 0 ? this.dataLineArr.length -1 ? this.dataLineArr[i].hour.substring(0,5) +' - '+ this.dataLineArr[i+1].hour.substring(0,5) : this.dataLineArr[i].hour.substring(0,5) +' - '+ this.dataLineArr[0].hour.substring(0,5) :this.dataLineArr[i].time}</span>
                        </div>
                        <div class="item">
                            <span class="radius2 radius"></span>
                            <span class="name">车辆总数</span>
                            <span class="name">${date[0].value}辆</span>
                        </div>
                        <div class="item">
                            <span class="radius1 radius"></span>
                            <span class="name">进场次数</span>
                            <span class="name">${date[1].value}次</span>
                        </div>
                    </div>
                    `
                }
            })

            return nameStr;
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        if(localStorage.getItem('logTime')){
            this.day = initYMD(JSON.parse(localStorage.getItem('logTime')));
            this.enterTime = initYMD(JSON.parse(localStorage.getItem('logTime')));
            if(initYMD(this.day) != initYMD(new Date())){
                this.timeFlag = false;
            }
        }
        this.getlist();
        this.getStatisticalFn();
        this.btnList = JSON.parse(localStorage.getItem("arr"));//localStorage当中的arr项存取的是按钮权限列表
        this.initAuth() //初始化权限
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.pageSize = 7;
                this.current = 1;
                this.day = new Date();
                this.enterTime = new Date();
                this.getStatisticalFn();
                this.getlist();
            }
        },
    },
    beforeDestroy() {
        if(localStorage.getItem('logTime')){
            localStorage.removeItem('logTime')
        }
    },
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/common.less";
</style>

<style scoped lang="scss">
@function pxToRem($val) {
    @return $val/100 + rem;
}
 /deep/ .canvasBox{
    .item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .radius{
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
            &.radius1{
                background-color: #5EF3C0;
            }
            &.radius2{
                background-color: #4990FE;
            }
            &.radius3{
                background-color: #49A9EE;
            }

        }
        .name{
            margin-right: 5px;
            font-size: 10px;
        }
    }
}
/deep/.mainContent{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    display: flex;
    justify-content: space-between;
    .scorll{
        flex: 1;
        height: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .scorll::-webkit-scrollbar {
        width: 6px;
    }
    /*滚动槽*/
    .scorll::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
    }
    /* 滚动条滑块 */
    .scorll::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }
    .content{
        width:  100%;
        .box{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .search{
                width: 100%;
                padding: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #fff;
                border-radius: 10px;
                margin-bottom: 10px;
                .right{
                    .btnList{
                        .item{
                            width: 100px;
                            height: 35px;
                            background: var(--themeColor);
                            border-radius: 6px;
                            text-align: center;
                            line-height: 35px;
                            color: #fff;
                            border: 1px solid var(--themeColor);
                            cursor: pointer;
                        }
                    }
                }
                .left{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .right_box{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        width: 450px;
                        position: relative;
                        .arrow_left,
                        .arrow_right{
                            width: 30px;
                            height: 42px;
                            text-align: center;
                            line-height:  42px;
                            font-size: 24px;
                            cursor: pointer;
                        }
                    }
                    .ivu-input-wrapper{
                        border: 1px solid var(--themeColor);
                        border-radius: 3px;
                        box-sizing: border-box;
                    }
                    .ivu-input,
                    .ivu-input-search {
                        border: none;
                        border-radius: 0;
                        color: var(--themeColor);
                    }
                    .ivu-icon{
                        color: var(--themeColor);
                    }

                }
            }
            .canvas{
                width: 100%;
                height: 290px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                background-color: #fff;
                border-radius: 10px;
                margin-bottom: 10px;
                .left{
                    width: 30%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    .list{
                        position: relative;
                        width: 100%;
                        height: auto;
                        list-style: none;
                        li{
                            width: 100%;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            font-size: 16px;
                            color: #333333;
                            margin-bottom: 10px;
                            .radius{
                                width: 16px;
                                height: 16px;
                                margin-right: 10px;
                                border-radius: 50%;
                            }
                            .name{
                                margin-right: 10px;
                                width: 70px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            .sub{
                                width: 50px;
                                margin-right: 5px;
                            }

                        }
                    }
                }
                .right{
                    position: relative;
                    width: 70%;
                    .canvas_none{
                        position: absolute;
                        top: 10%;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 80%;
                        height: 200px;
                        img{
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            .tableBox{
                width:100%;
                margin:0 auto;
                background-color: #fff;
                border-radius: 10px;
                padding-top: 20px;
                box-sizing: border-box;
                .tableList{
                    width: 96%;
                    margin: auto;
                }
                .el-table{
                    td,
                    th.is-leaf{
                        padding: 0;
                        height: 60px;
                        line-height: 60px;
                        border-bottom: none;
                    }
                }
                .el-table__row{
                    background-color: #fff;
                    // cursor: pointer;
                    td{
                        padding: 0;
                        height: 60px;
                        line-height: 60px;
                    }
                }
                .el-table__fixed-right::before, .el-table__fixed::before{
                    display: none;
                }
                .el-table--striped .el-table__body tr.el-table__row--striped td{
                    background-color: rgba(220, 220, 220, 0.5) ;
                    // cursor: pointer;
                }
            }
        }
    }
    /deep/.padding_left{
      padding-left: 15px !important;
    }
}
</style>
